<template>
    <div id="videos">
        <el-carousel height="383px" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
                <el-image :src="item.url" fit="cover"></el-image>
            </el-carousel-item>
        </el-carousel>
        <div class="tab-lists-container">
            <el-row>
                <el-col :span="10">
                    <div class="tab-title-container">
                        <el-radio-group @change="typeChange" style="float: left" v-model="videoQueryParam.typeId" size="small" fill="#f3cd20">
                            <el-radio-button label="" type="info">全部</el-radio-button>
                            <el-radio-button v-for="(item, index) in typeList" :key="item.id" :label="item.id" size="mini">{{item.typeName}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-select class="select-college" size="small" v-model="videoQueryParam.collegeId" filterable placeholder="请选择学校" @change="getData" clearable>
                        <el-option
                                v-for="item in collegeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <TabBorder></TabBorder>
            <div class="videos-container">
                <ul class="video-lists-box">
                    <li class="video-lists" v-for="(item, index) in videoList" :key="item.id" @click="goToDetails(item.id)">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-image :src="item.thumb" fit="cover" class="image-thumb"></el-image>
                            <div style="padding: 5px 14px">
                                <el-row>
                                    <el-col :span="12" class="ellipsis-line">
                                        <span class="video-lists-title">{{item.title}}</span>
                                    </el-col>
                                    <el-col :span="12" class="video-lists-type-col ellipsis-line">
                                        <span v-for="(type,index) in item.typeList" :key="index">
                                            <span v-if="index != 0">• </span>{{type.typeName}}
                                        </span>
                                    </el-col>
                                </el-row>

                                <div class="bottom clearfix">
                                    <el-row>
                                        <el-col :span="6">
                                            <i class="iconfont el-icon-bofang"> {{item.viewsnum}}</i>
                                        </el-col>
                                        <el-col :span="6">
                                            <i class="iconfont el-icon-dianzan1"> {{item.likenum}}</i>
                                        </el-col>
                                    </el-row>
                                </div>

                            </div>
                        </el-card>
                    </li>
                </ul>
            </div>
            <!-- 分页组件 -->
            <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
        </div>
    </div>
</template>

<script>
    import {selectAllType} from "@/api/typeFun";
    import {selectVideos} from "@/api/videoFun";
    import {selectAllCollege} from "@/api/collegeFun";
    import {insertVideoViews} from "@/api/videoViewsFun";
    import Pagination from "@/components/Pagination";
    import TabBorder from "@/components/TabBorder";
    import {Loading, Message, MessageBox} from 'element-ui';

    export default {
        name: "videos",
        data(){
            return{
                imgList: [
                    {
                        id: 1,
                        url: 'http://123.56.87.55/static/streedance/course/course-web.jpg'
                    }
                ],
                typeList: [],
                videoQueryParam: {
                    pageIndex: 0,
                    pageSize: 40,
                    typeId: '',
                    collegeId: '',
                },
                collegeList: [],
                videoList: [],
                pageparm: {
                    currentPage: 1,
                    pageSize: 40,
                    total: 0
                }
            }
        },
        // 注册组件
        components: {
            //分页组件
            Pagination,
            TabBorder
        },
        created(){
            selectAllType({}).then(res=>{
                if (res.status == 200) {
                    this.typeList = res.data
                }else {
                    Message.error(res.message)
                }
            })
            this.getData();
            this.getCollegeData();
        },

        methods: {
            getCollegeData(){
                selectAllCollege().then(res=>{
                    this.collegeList = res.data
                })
            },
            getData(){
                selectVideos(this.videoQueryParam).then(res=>{
                    if (res.status == 200) {
                        console.log(res)
                        this.pageparm.total = res.data.totalCount;
                        this.videoList = res.data.data;

                    }
                })
            },

            typeChange(value) {
                this.videoQueryParam.typeId = value
                this.getData();
            },
            // 分页插件事件
            pageCallFather(param) {
                this.videoQueryParam.pageIndex = param.currentPage - 1;
                this.videoQueryParam.pageSize = param.pageSize;
                this.getData();
            },

            goToDetails(id){
                this.$router.push({
                    path: '/videos/videoDetail',
                    query: {
                        videoId: id
                    }
                })
                insertVideoViews({
                    videoId: id
                }).then(res=>{
                    if (res.status != 200) {
                        Message.error(res.message);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    #videos{
        margin: 30px 0px;
    }
    .image-thumb{
        height: 130px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .tab-lists-container{
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        padding: 0 5px;
    }
    .tab-title-container{
        color: #fff;
        font-size: 28px;
        position: relative;
        text-overflow: ellipsis;
        width: 100%;
        height: 100%;
        display: inline-block;
        margin-bottom: 20px;
    }
    .videos-container{
        width: 100%;
    }
    .video-lists-box{
        /*width: 100%;*/
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .video-lists-box .video-lists{
        width: 235px;
        height: 237px;
        margin: 0 20px 20px 0;
        list-style: none;
        text-align: left;
    }
    .video-lists-box .video-lists:hover{
        cursor: pointer;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .video-lists-type-col{
        text-align: end;
        color: #f37232;
    }
    .ellipsis-line{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .select-college{
        width: 300px;
    }
</style>
